<template>
    <div>
        <div class="shopcar-box">
            <div class="mui-card">
				<div class="mui-card-content" v-for="(item,i) in $store.state.shopCar" :key="item.id">
          <div class="mui-card-content-inner">
            <mt-switch 
            v-model="$store.getters.getAllselected[item.id]" 
            @change="selectedchanged(item.id,$store.getters.getAllselected[item.id])"
            ></mt-switch>
            <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1474324382.jpg" alt="">
            <div>
                <h1>{{item.title}}</h1>
                <p>
                    <span class="price">{{item.pirce}}元</span>
                    <carnum :initcount="item.count" :goodsid="item.id"></carnum>
                    <a href="#" class="del" @click.prevent="delinfo(item.id,i)">删除</a>
                </p>
            </div>
          </div>
				</div>
			</div>

            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计(不含运费)</p>
              <p>已选中 <span class="price"> {{$store.getters.getNumadd.count}} </span>件 , 
              总价<span class="price" > {{$store.getters.getNumadd.numadd}} </span>元</p>
            </div>
            <mt-button type="danger" size="small">去结算</mt-button>
					</div>
				</div>
			</div>
      {{$store.getters.getAllselected}}
        </div>
    </div>
</template>

<script>
import carnum from "../subcomponents/car_num.vue";
export default {
  data() {
    return {
      goodslist: [] //购物车商品列表
    };
  },
  created() {
    this.getshoplist();
  },
  methods: {
    getshoplist() {
      //获取商品id列表 需要从store里面取，然后放到idArr中
      var idArr = []; //购物车商品id列表
      this.$store.state.shopCar.forEach(item => {
        idArr.push(item.id);
      });
      if (idArr.length <= 0) {
        return;
      }
      //发送请求获取数据 并且拼接逗号在每个id之间
      this.$http
        .get("api/goods/getshopcarlist/" + idArr.join(","))
        .then(result => {
          if (result.body.status === 0) {
            this.goodslist = result.body.message;
          } else {
            console.log("购物车商品列表-服务器请求失败");
          }
        });
    },
    delinfo(id, index) {
      //删除 goodslist ,删除store
      this.goodslist.splice(index, 1); //删除goodslist
      this.$store.commit("removeinfo", id); //删除store
    },
    selectedchanged(id,val){ //通过框架change事件触发一个方法获取id和val
      console.log(id + '~~~' + val)
      this.$store.commit('updateselected',{id,selected:val})
    }
  },
  components: {
    carnum
  },

};
</script>

<style lang="sass" scoped>
.shopcar-box{
    background-color: #eee;
    overflow:hidden;
    .mui-card-content-inner{
        padding: 10px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        img{
            height:60px;
        }
        h1{
            font-size:14px;
        }
        .price{
            color:red;
            font-weight: bold;
        }
        .del{
            color:#26a2ff;
        }
        .jiesuan{
          display:flex;
          justify-content:space-between;
          align-items:center
          
        }
    }
}

</style>
